<%@page contentType="text/html;charset=utf-8" %>
<html>
<head>
    <title>管理界面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/bootstrap-maizi.css"/>
</head>
<body>
<%@include file="header.jsp" %>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">网站统计信息</div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>数据名称</th>
                            <th>数据量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">用户数</th>
                            <td>${memberNum}人</td>
                        </tr>
                        <tr>
                            <th scope="row">电影</th>
                            <td>${movieNum}部</td>
                        </tr>
                        <tr>
                            <th scope="row">影片评价</th>
                            <td>${movieEvaluationNum}条</td>
                        </tr>
                        <tr>
                            <th scope="row">影评文章</th>
                            <td>${movieReviewNum}篇</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">活跃用户数</div>
                <div class="panel-body">
                    <canvas id="canvas-index" class="col-md-12"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="footer.jsp" %>


<script src="${pageContext.request.contextPath }/assets/javascripts/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/javascripts/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/javascripts/Chart.js"></script>
<script src="${pageContext.request.contextPath }/assets/javascripts/bootbox.min.js"></script>

<script>
    var ctx = document.getElementById("canvas-index").getContext("2d");
    var lineChartData = {
        //X坐标数据
        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
        datasets: [
            {
                //统计表的背景颜色
                fillColor: "rgba(255,255,255,0.5)",
                //统计表画笔颜色
                strokeColor: "#000",
                //点的颜色
                pointColor: "#000;",
                //点边框的颜色
                pointStrokeColor: "black",
                //鼠标触发时点的颜色
                pointHighlightFill: "black",
                //鼠标触发时点边框的颜色
                pointHighlightStroke: "#000",
                //Y坐标数据,以数组中的最大值来确定y轴的最大值
                data: [132, 212, 133, 144, 252, 126, 147]
            }
        ]
    };
    var myNewChart = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
</script>
</body>
</html>